<template>
  <div class="prepare">
    <TopNav />
    <div class="block">
      <div class="date">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="(value) => changeHandler(value)"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          v-loading.fullscreen.lock="fullscreenLoading"
        ></el-date-picker>
      </div>
    </div>
    <div class="list">
      <h3>备课情况</h3>
      <div class="conter">
        <div class="echarts">
          <div class="con_left">
            <div class="casesNum">
              <h3>备课课例</h3>
              <div class="calssCase">
                <p>
                  {{num}}
                  <span>课例数</span>
                </p>
              </div>
            </div>
            <div class="caseBox">
              <div id="case" style="width: 500px;height: 400px;"></div>
            </div>
          </div>
          <div class="con_right">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="按学科" name="first">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="kind_name" label="学科" width="180"></el-table-column>
                  <el-table-column prop="num" label="备课包数"></el-table-column>
                </el-table>
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  layout="total, prev, pager, next"
                  :total="total"
                ></el-pagination>
              </el-tab-pane>

              <el-tab-pane label="按老师" name="second">
                <el-table :data="userData" style="width: 100%">
                  <el-table-column prop="username" label="老师" width="180"></el-table-column>
                  <el-table-column prop="num" label="备课包数"></el-table-column>
                </el-table>
                <el-pagination
                  background
                  @size-change="handleSizeChange1"
                  @current-change="handleCurrentChange1"
                  :current-page="currentPage1"
                  :page-size="pageSize1"
                  layout="total, prev, pager, next"
                  :total="userTotal"
                ></el-pagination>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="resources">
          <h3>课程资源</h3>
          <div id="resources_ech" style="width: 100%;height: 260px;"></div>
        </div>
        <div class="resources">
          <h3>资源中心</h3>
          <div id="resources_echs" style="width: 100%;height: 260px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from './TopNav.vue'
// let token = sessionStorage.getItem('token')
export default {
  name: 'index',
  components: {
    TopNav,
  },
  data() {
    return {
      value1: '',
      activeName: 'first',
      total: 0,
      currentPage: 0,
      pageSize: 0,
      tableData: [],
      userTotal: 0,
      currentPage1: 0,
      pageSize1: 0,
      userData: [],
      fullscreenLoading: false,
      num: '',
      starttimes: '',
      endtimes: '',
      kindtype: '',
      usertype: '',
      token: '',
    }
  },
  mounted() {
    this.token = sessionStorage.getItem('token')
    this.fetchData()
  },
  methods: {
    changeHandler(value) {
      var star = new Date(
        new Date(new Date(value[0]).toLocaleDateString()).getTime()
      )
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 2000)
      var starttime = new Date(star).getTime() / 1000
      var endtime = new Date(value[1] + ' 23:59:59').getTime() / 1000
      this.fetchData(starttime, endtime)
      this.starttimes = starttime
      this.endtimes = endtime
    },
    handleClick(tab, event) {
      var self = this
      var kindtype
      var usertype
      if (event.path[0].id === 'tab-first') {
        kindtype = 1
        usertype = 0
      } else {
        kindtype = 0
        usertype = 1
      }
      this.kindtype = kindtype
      this.usertype = usertype
      this.kind(kindtype, usertype)
      this.user(kindtype, usertype)
    },
    kind(kindtype, usertype) {
      var self = this
      var myChart = this.$echarts.init(document.getElementById('case'))
      if (kindtype == 1) {
        this.axios({
          method: 'post',
          url: this.$api + '/index/resources/getBeikeList',
          data: {
            token: this.token,
            starttime: this.starttimes,
            endtime: this.endtimes,
            kindtype: 1,
            usertype: 0,
            page: this.currentPage,
          },
        }).then(function (res) {
          var number = res.data.data.number
          var niandata = res.data.data.list.data
          var caseData = []
          for (var i = 0; i < niandata.length; i++) {
            var obj = new Object()
            obj.name = niandata[i].kind_name
            obj.value = niandata[i].num
            caseData[i] = obj
          }
          var option = {
            title: {
              text: '各学科备课课例分布',
              left: 'center',
              textStyle: {
                fontSize: '14',
                color: '#111',
                fontWeight: '400',
              },
            },

            tooltip: {
              trigger: 'item',
              formatter: '{b} <br/>{c} : {d} %', //a 系列名称，b 数据项名称，c 数值，d 百分比
            },

            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '60%',
                right: '20%',
                width: 500,
                // labelLine: {
                //   show: false,
                // },
                color: ['#3f5cf4', '#f5b93f', '#3CBDF6'],
                label: {
                  //饼图图形上的文本标签
                  normal: {
                    show: true,
                    position: 'inner', //标签的位置
                    textStyle: {
                      fontWeight: 300,
                      fontSize: 12,
                      color: '#fff',
                    },
                  },
                },
                data: caseData,
              },
            ],
          }
          myChart.setOption(option)
          self.total = res.data.data.list.total
          self.pageSize = res.data.data.list.per_page
          self.currentPage = res.data.data.list.current_page
          self.tableData = res.data.data.list.data
        })
      }
    },
    user(kindtype, usertype) {
      var self = this
      var myChart = this.$echarts.init(document.getElementById('case'))
      if (usertype == 1) {
        this.axios({
          method: 'post',
          url: this.$api + '/index/resources/getBeikeList',
          data: {
            token: this.token,
            starttime: this.starttimes,
            endtime: this.endtimes,
            kindtype: 0,
            usertype: 1,
            page: this.currentPage,
          },
        }).then(function (res) {
          var number = res.data.data.number
          var niandata = res.data.data.list.data
          var caseData = []
          for (var i = 0; i < niandata.length; i++) {
            var obj = new Object()
            obj.name = niandata[i].username
            obj.value = niandata[i].num
            caseData[i] = obj
          }
          var option = {
            title: {
              text: '各老师备课课例分布',
              left: 'center',
              textStyle: {
                fontSize: '14',
                color: '#111',
                fontWeight: '400',
              },
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b} <br/>{c} : {d} %', //a 系列名称，b 数据项名称，c 数值，d 百分比
            },

            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                // center: ['50%', '32%'],
                width: 500,
                labelLine: {
                  show: false,
                },
                color: ['#3f5cf4', '#f5b93f', '#3CBDF6'],
                label: {
                  //饼图图形上的文本标签
                  normal: {
                    show: true,
                    position: 'inner', //标签的位置
                    textStyle: {
                      fontWeight: 300,
                      fontSize: 12,
                      color: '#fff',
                    },
                  },
                },
                data: caseData,
              },
            ],
          }
          myChart.setOption(option)
          self.userTotal = res.data.data.list.total
          self.pageSize1 = res.data.data.list.per_page
          self.currentPage1 = res.data.data.list.current_page
          self.userData = res.data.data.list.data
        })
      }
    },
    fetchData(starttime, endtime) {
      var self = this
      var myChart = this.$echarts.init(document.getElementById('case'))
      this.axios({
        method: 'post',
        url: this.$api + '/index/resources/getBeikeList',
        data: {
          token: self.token,
          starttime: starttime,
          endtime: endtime,
          kindtype: 0,
          usertype: 0,
          page: this.currentPage,
        },
      }).then(function (res) {
        var number = res.data.data.number
        self.num = number
        var niandata = res.data.data.list.data
        var caseData = []
        for (var i = 0; i < niandata.length; i++) {
          var obj = new Object()
          obj.name = niandata[i].kind_name
          obj.value = niandata[i].num
          caseData[i] = obj
        }
        var option = {
          title: {
            text: '各学科备课课例分布',
            left: 'center',
            textStyle: {
              fontSize: '14',
              color: '#111',
              fontWeight: '400',
            },
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} <br/>{c} : {d} %', //a 系列名称，b 数据项名称，c 数值，d 百分比
          },

          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              center: ['50%', '32%'],
              labelLine: {
                show: false,
              },
              color: ['#3f5cf4', '#f5b93f', '#3CBDF6'],
              label: {
                //饼图图形上的文本标签
                normal: {
                  show: true,
                  position: 'inner', //标签的位置
                  textStyle: {
                    fontWeight: 300,
                    fontSize: 12,
                    color: '#fff',
                  },
                },
              },
              data: caseData,
            },
          ],
        }
        myChart.setOption(option)
        if (self.currentPage == 1) {
          self.currentPage = 1
        } else if (self.currentPage == self.total) {
          self.currentPage = self.total
        }
        self.total = res.data.data.list.total
        self.pageSize = res.data.data.list.per_page
        self.currentPage = res.data.data.list.current_page
        self.tableData = res.data.data.list.data
      })
      var myCharts = this.$echarts.init(
        document.getElementById('resources_ech')
      )
      var myChartss = this.$echarts.init(
        document.getElementById('resources_echs')
      )
      this.axios({
        method: 'post',
        url: this.$api + '/index/resources/getclassresources',
        data: {
          token: this.token,
          starttime: starttime,
          endtime: endtime,
        },
      }).then(function (res) {
        var name = res.data.data.name
        var num = res.data.data.num
        var option = {
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            name: '资源名称',
            data: name,
            axisLabel: {
              interval: 0,
              rotate: -35, //倾斜度 -90 至 90 默认为0
              margin: 10,
            },
          },
          yAxis: {
            type: 'value',
            name: '次数',
          },
          grid: {
            left: '3%',
            right: '9%',
            bottom: '3%',
            containLabel: true,
          },
          color: '#55E4C2',
          series: [
            {
              data: num,
              type: 'bar',
              barWidth: 20,
            },
          ],
        }
        myCharts.setOption(option)
      })
      this.axios({
        method: 'post',
        url: this.$api + '/index/resources/getziyaun',
        data: {
          token: this.token,
          starttime: starttime,
          endtime: endtime,
        },
      }).then(function (res) {
        if (res.data.code == 401) {
          self.$message({
            message: '请登录后再操作！',
          })
          self.$router.push({
            name: 'login',
          })
        }
        var name = res.data.data.name
        var num = res.data.data.num
        var option = {
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            name: '资源名称',
            data: name,
            axisLabel: {
              interval: 0,
              rotate: -35, //倾斜度 -90 至 90 默认为0
              margin: 10,
            },
          },
          yAxis: {
            type: 'value',
            name: '次数',
          },
          grid: {
            left: '3%',
            right: '9%',
            bottom: '3%',
            containLabel: true,
          },
          color: '#55E4C2',
          series: [
            {
              data: num,
              type: 'bar',
              barWidth: 20,
            },
          ],
        }
        myChartss.setOption(option)
      })
    },
    handleSizeChange: function (size) {
      this.pagesize = size
      this.currentPage = 1
      this.fetchData()
      console.log(this.pagesize) //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      var self = this
      this.currentPage = currentPage
      this.fetchData(
        self.starttimes,
        self.endtimes,
        this.kindtype,
        this.usertype,
        currentPage
      )
    },
    handleSizeChange1: function (size) {
      this.pagesize1 = size
    },
    handleCurrentChange1: function (currentPage) {
      var self = this
      this.currentPage = currentPage
      this.fetchData(
        self.starttimes,
        self.endtimes,
        this.kindtype,
        this.usertype,
        currentPage
      )
    },
  },
}
</script>

<style>
.prepare .echarts {
  margin-bottom: 40px;
}

.prepare .echarts::after {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  clear: both;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 40px;
}

.prepare .con_left {
  width: 30%;
  float: left;
  box-sizing: border-box;
}

.prepare .con_left h3 {
  border: 0;
  padding-bottom: 30px;
}

.prepare .con_left h3::after {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  top: 18px;
}

.prepare .con_left .calssCase {
  background: #55e4c2;
  padding: 50px 0 55px 0;
  width: 70%;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 6px;
}

.prepare .con_left .calssCase p {
  font-size: 28px;
  font-weight: 400;
  color: #111111;
}

.prepare .con_left .calssCase p span {
  display: block;
  font-size: 14px;
}

.prepare .con_right {
  width: 70%;
  float: left;
}

.prepare .con_right .el-tabs {
  margin-left: 44px;
}

.prepare .con_right .el-tabs__nav {
  left: 50%;
  margin-left: -84px;
}

.prepare .con_right .el-tabs--card > .el-tabs__header {
  border: 0;
  margin-bottom: 30px;
}

.prepare .con_right .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 1px solid #55e4c2;
  border-radius: 6px;
}

.prepare .con_right .el-tabs__item:hover {
  color: #55e4c2;
}

.prepare .con_right .el-tabs__item.is-active {
  color: #fff;
  background: #55e4c2;
  border-bottom-color: #55e4c2;
}

.prepare .con_right .el-table {
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  margin-bottom: 18px;
}

.prepare .con_right .el-table th,
.prepare .con_right .el-table td {
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #111111;
}

.prepare .con_right .el-table th {
  background: #55e4c2;
  font-size: 16px;
  font-weight: bold;
}

.prepare .con_right .el-pagination {
  text-align: right;
}

.prepare .resources {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.prepare .resources h3 {
  border: 0;
  padding-bottom: 30px;
}

.prepare .resources h3::after {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  top: 18px;
}
.caseBox {
  display: flex;
  width: 70%;
  justify-content: center;
}
</style>
